<template>
	<div class="CommonServices">
		<header>
			<h2>常用服务</h2>
			<div class="head-right">
				<span>查看全部</span>
				<text class="cuIcon-right"></text>
			</div>
		</header>
		<div class="functions">
			<div class="fn-item" v-for="(i, j) in list" :key="j" @click="onFn(i)">
				<image class="imgs" :src="i.icon" />
				<label>{{ i.name }}</label>
			</div>
		</div>
	</div>
</template>

<script>
import { getSpecifyTypeFile } from '../../../common/API/index.js';

export default {
	name: 'CommonServices',
	data() {
		return {
			list: [
				{ name: '图片', type: 'ImgTypes', icon: require('../../../static/img/index/photo.png') },
				{ name: '视频', type: 'ViodeoTypes', icon: require('../../../static/img/index/video.png') },
				{ name: '传输助手', type: 'kaifazhong', icon: require('../../../static/img/index/TransmissionAssistant.png') },
				{ name: '小说', type: 'kaifazhong', icon: require('../../../static/img/index/story.png') },
				{ name: '音频', type: 'AudioTypes', icon: require('../../../static/img/index/audio.png') },
				{ name: '效率管理', type: 'StudyPlane', icon: "https://qdds666.oss-cn-hangzhou.aliyuncs.com/AYangPan/index/learnPlan.png" },
				{ name: '内存管理', type: 'MemoryManagement', icon:"https://qdds666.oss-cn-hangzhou.aliyuncs.com/AYangPan/index/IO.png" },
				{ name: '设备管理', type: 'DeviceManager', icon:"https://qdds666.oss-cn-hangzhou.aliyuncs.com/AYangPan/index/device.png" }
			],
			FileTypeList: [] //获取指定类型的所有文件
		};
	},
	methods: {
		async onFn(e) {
			if (e.type === 'StudyPlane') return this.$pub.naviTo(`/pages/other/StudyPlane/index`);
			if (e.type === 'StudyPlane') return this.$pub.naviTo(`/pages/other/StudyPlane/index`);
			if (e.type === 'MemoryManagement') return this.$pub.naviTo(`/pages/other/MemoryManagement/index`);
			if (e.type === 'DeviceManager') return this.$pub.naviTo(`/pages/other/DeviceManager/index`);
			this.$pub.naviTo(`/pages/other/FileTypeList/FileTypeList?type=${e.type}&name=${e.name}`);
		}
	}
};
</script>
<style lang="less" scoped>
.CommonServices {
	margin-top: 20px;
	header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 10px;
		.head-right {
			display: flex;
			justify-content: center;
			align-items: center;
			span {
				font-size: 14px;
				color: gray;
			}
		}
	}
	.functions {
		margin-top: 12px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		// height: 230px;
		padding: 10rpx;
		.fn-item {
			// flex-grow: 1;
			flex-basis: 32.3%;
			box-sizing: border-box;
			text-align: center;
			color: black;
			font-size: 18px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background-color: rgba(204, 204, 204, 0.1);
			border-radius: 10px;
			padding: 10px 10px 20px;
			margin-bottom: 10rpx;
			.imgs {
				height: 40px;
				width: 40px;
				margin-bottom: 6px;
			}
		}
		.fn-item:nth-of-type(3n+2){
			margin:0 10rpx 10rpx 10rpx;
		}
	}
}
</style>
